<template>
  <div class="g-module clearfix">
    <div class="g-mn">
      <div class="v-hd">
        <a href="javascript:;" class="tit">热门推荐</a>
        <div class="tab">
        
           <router-link :to="{
             path:'/discover/playlist',
             query:{
               cat:'华语'
             }
           }">华语</router-link>
          <span class="line">|</span>
          <router-link :to="{
             path:'/discover/playlist',
             query:{
               cat:'流行'
             }
           }">流行</router-link>
          <span class="line">|</span>
          <router-link :to="{
             path:'/discover/playlist',
             query:{
               cat:'摇滚'
             }
           }">摇滚</router-link>
          <span class="line">|</span>
          <router-link :to="{
             path:'/discover/playlist',
             query:{
               cat:'民谣'
             }
           }">民谣</router-link>
          <span class="line">|</span>
          <router-link :to="{
             path:'/discover/playlist',
             query:{
               cat:'电子'
             }
           }">电子</router-link>
        </div>
        <div class="more">
         
          <router-link to="/discover/playlist">更多</router-link>
          <i class="cor">&nbsp;</i>
        </div>
      </div>

      <ul class="m-cvr clearfix">
        <li v-for="el in recommend" :key="el.id">
          <div class="u-cor">
            <img :src="el.picUrl + '?param=140y140'" />

            <router-link
              :to="{
                path: '/playlist',
                query: {
                  id: el.id,
                },
              }"
              class="msk"
            ></router-link>
            <div class="bottom">
              <a href="javscript:;" class="icon-play" @mousedown="play_songs(el.id)"></a>
              <span class="icon-h"></span>
              <span class="nb">{{ el.playCount }}</span>
            </div>
          </div>
          <p class="dec">
            <router-link
              :to="{
                path: '/playlist',
                query: {
                  id: el.id,
                },
              }"
              class="tit1"
            >
              {{ el.name }}</router-link
            >
          </p>
        </li>
      </ul>

      <div class="n-clmnad"></div>

      <!-- 新碟 -->
      <div class="new_v">
        <div class="v-hd">
          <a href="javascript:;" class="tit">新碟上架</a>
          <div class="more">
            <a href="javascript:;">更多</a>
            <i class="cor">&nbsp;</i>
          </div>
        </div>
        <div class="n-disk">
          <div class="inner">
            <a
              href="javascript:;"
              class="p-page"
              @mousedown="ban_flag ? n_ban_l() : false"
            >
              &nbsp;
            </a>
            <div class="roll">
              <div
                class="m_ban overtext"
                :style="ban_move"
                @transitionend="enevt"
              >
                <div v-for="index in 2" :key="index">
                  <ul>
                    <li v-for="el in n_disc1" :key="el.id">
                      <div class="u-c">
                        <img
                          :src="
                            el.blurPicUrl
                              ? el.blurPicUrl + '?param=100y100'
                              : 'https://p2.music.126.net/UeTuwE7pvjBpypWLudqukA==/3132508627578625.jpg?param=180y180'
                          "
                        />
                       
                        <router-link :to="{
                          path:'/album',
                          query:{
                            id:el.id
                          } 
                        }" class="msk"></router-link>
                        <a href="javascript:;" class="icon-play1"></a>
                      </div>
                      <p class="overtext">
                        <a href="javascript:;" class="s-fc">{{ el.name }}</a>
                      </p>
                      <p class="overtext">
                        <a href="javascript:;" class="s-fc1">{{
                          el.artist.name
                        }}</a>
                      </p>
                    </li>
                  </ul>
                  <ul>
                    <li v-for="el in n_disc2" :key="el.id">
                      <div class="u-c">
                        <img
                          :src="
                            el.blurPicUrl
                              ? el.blurPicUrl + '?param=100y100'
                              : 'https://p2.music.126.net/UeTuwE7pvjBpypWLudqukA==/3132508627578625.jpg?param=180y180'
                          "
                        />
                         <router-link :to="{
                          path:'/album',
                          query:{
                            id:el.id
                          } 
                        }" class="msk"></router-link>
                        <a href="javascript:;" class="icon-play1"></a>
                      </div>
                      <p class="overtext">
                        <a href="javascript:;" class="s-fc">{{ el.name }}</a>
                      </p>
                      <p class="overtext">
                        <a href="javascript:;" class="s-fc1">{{
                          el.artist.name
                        }}</a>
                      </p>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <a
              href="javascript:;"
              class="n-page"
              @mousedown="ban_flag ? n_ban_r() : false"
              >&nbsp;</a
            >
          </div>
        </div>
      </div>

      <!-- 榜单 -->
      <div>
        <div class="v-hd">
          <a href="javascript:;" class="tit">榜单</a>
          <div class="more">
         
            <router-link to="/discover/toplist">更多</router-link>
            <i class="cor">&nbsp;</i>
          </div>
        </div>
        <div class="n-bilst">
          <dl class="blk" v-for="(el, index) in list" :key="el.id">
            <dt class="d-hd">
              <div class="cver">
                <img :src="el.coverImgUrl + '?param=100y100'" />
                <a href="javascript:;" class="msk2"></a>
              </div>
              <div class="tit3">
             
                 <router-link :to="{
                    path:'/discover/toplist',
                    query:{
                      id:el.id
                    }
                   }"><h3 class="overtext">{{ el.name }}</h3></router-link>
                <div class="btn">
                  <a
                    href="javascript:;"
                    class="p-bg"
                    @mousedown="plays(index)"
                    title="播放"
                  >
                  </a>
                  <a href="javascript:;" class="a-bg" title="收藏"> </a>
                </div>
              </div>
            </dt>
            <dd>
              <ul>
                <li v-for="(el, i) in list_data[index]" :key="el.id">
                  <span class="no">{{ i + 1 }}</span>

                  <router-link
                    :to="{
                      path: '/song',
                      query: {
                        id: el.id,
                      },
                    }"
                    class="nm s-fc overtext"
                    >{{ el.name }}</router-link
                  >
                  <div class="oper">
                    <a
                      href="javascript:;"
                      class="pl"
                      @mousedown="play_s(index, i)"
                      title="播放"
                    ></a>
                    <a
                      href="javascript:;"
                      class="ad"
                      title="添加到播放列表"
                      @mousedown="add_s(index, i)"
                    ></a>
                    <a href="javascript:;" class="col" title="收藏"></a>
                  </div>
                </li>
              </ul>
              <div><a href="javascript:;" class="s-fc more1">查看全部</a></div>
            </dd>
          </dl>
        </div>
      </div>
    </div>

    <!-- 右侧区域 -->
    <div class="g-sd">
      <div class="n-user">
        <p class="n-myinfo">
          登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
        </p>
        <a href="javascript:;" class="enroll">用户登录</a>
      </div>
      <div class="n-singer">
        <h3 class="v-hd3">
          <span class="f-f1">入驻歌手</span>
          <a href="javascript:;" class="more2">查看全部 ></a>
        </h3>
      </div>
      <div class="n-enter clearfix">
        <li >
          <a href="javascript:;" class="itm">
            <div class="head">
              <img
                src="http://p2.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62"
                class="j-img"
              />
            </div>
            <div class="ifo">
              <h4>
                <span class="n-s overtext"> 张惠妹aMEI </span>
                <p class="f-th overtext">台湾歌手张惠妹</p>
              </h4>
            </div>
          </a>
        </li>
      </div>
      <div>
        <a href="javascript:;" class="u-btn">
          <i>申请成为网易音乐人</i>
        </a>
      </div>
      <div class="n-dj">
        <h3 class="v-hd3">
          <span class="f-f1">热门主播</span>
        </h3>
        <ul class="n-hotd">
          <li>
            <a href="javascript:;" class="cver1">
              <img
                src="http://p2.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40"
                alt=""
              />
            </a>
            <div class="info">
              <p>
                <a href="javascript:;" class="nm-icn">陈立</a>
              </p>
              <p class="overtext s-fc1">心理学家、美食家陈立教授</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MusicRecom",
  data() {
    return {
      ban_move: {
        left: "-645px",
        transition: "left 1s ease-out",
      },
      ban_flag: true,
      n_disc1: [],
      n_disc2: [],
      list: [],
      list_data: [],
      list_data1: [],
      recommend: [],
    };
  },
  mounted() {
    axios
      .get("http://localhost:8080/api/top/album", {
        params: {
          area: "ALL",
          type: "hot",
        },
        headers: {
          withCredentials: true,
        },
      })
      .then((response) => {
        this.n_disc1 = response.data.weekData.slice(0, 5);
        this.n_disc2 = response.data.weekData.slice(5, 10);
      });

    axios.get("http://localhost:8080/api/toplist").then((response) => {
      this.list = response.data.list.slice(0, 3);
    });
    axios.get("http://localhost:8080/api/personalized").then((response) => {
   
      this.recommend = response.data.result.slice(0, 8);
   
     
    });
    // axios.get('http://localhost:8080/api/dj/toplist/popular').then( (response) => {
    //       console.log(response.data);
    // });
  
    // axios.get('http://localhost:8080/api/user/detail',{
    //   params:{
    //     id:'1554477641'
    //   }
    // }).then( (response) => {
    //   console.log(response.data);
    // })
  },

  methods: {
    n_ban_r() {
      this.ban_flag = false;
      if (this.ban_move.transition == "none") {
        this.ban_move.transition = "left 1s ease-out";
      }
      this.ban_move.left = this.ban_move.left.split("p")[0] - 645 + "px";
    },
    n_ban_l() {
      this.ban_flag = false;
      if (this.ban_move.transition == "none") {
        this.ban_move.transition = "left 1s ease-out";
      }
      this.ban_move.left =
        Number(this.ban_move.left.split("p")[0]) + 645 + "px";
    },

    enevt() {
      switch (this.ban_move.left.split("p")[0]) {
        case "-1935":
          this.ban_move.left = "-645px";
          this.ban_move.transition = "none";

          break;
        case "0":
          this.ban_move.left = "-1290px";
          this.ban_move.transition = "none";
          break;

        default:
          break;
      }
      this.ban_flag = true;
    },
    play_s(index, i) {
      this.$bus.$emit("musicList", this.list_data[index][i]);
    },
    add_s(index, i) {
      this.$bus.$emit("addPlayList", this.list_data[index][i]);
    },
    plays(index) {
      this.$bus.$emit("musicLists", this.list_data1[index]);
    },
    play_songs(index){
      
      axios.get('http://localhost:8080/api/playlist/detail',{
        params:{
          id:index
        }
      }).then( (response) => {
       
         this.$bus.$emit('musicLists',response.data.playlist.tracks)
      })
    }
  },
  watch: {
    list() {
      this.list.forEach((el, index) => {
        axios
          .get("http://localhost:8080/api/playlist/detail", {
            params: {
              id: el.id,
            },
          })
          .then((response) => {
            this.list_data.splice(
              index,
              0,
              response.data.playlist.tracks.slice(0, 10)
            );
            this.list_data1.splice(index, 0, response.data.playlist.tracks);
          });
      });
    },
  },
};
</script>

<style scoped lang='less'>
.g-module {
  margin: 0 auto;
  width: 980px;
  min-height: 700px;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  background: url(../images/wrap1.png) repeat-y 100% 100%;
}

.g-mn {
  float: left;

  width: 729px;
  padding: 20px 20px 40px;
  box-sizing: border-box;
}
.v-hd {
  height: 33px;
  padding: 0 10px 0 34px;
  border-bottom: 2px solid #c10d0c;

  background: url(../images/index.png) no-repeat -225px -156px;
}
.tit {
  float: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
  color: #333;
  text-align: left;
}
.tab {
  margin: 7px 0 0 20px;
  float: left;
  a {
    color: #666;
  }
}
.line {
  margin: 0 10px;
  color: #ccc;
}
.more {
  float: right;
  margin-top: 9px;
}
.cor {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: middle;
  background: url(../images/index.png) no-repeat 0 -240px;
}
.g-sd {
  float: right;
  width: 249px;
  height: 500px;
}
.m-cvr {
  margin: 20px 0 0 -42px;
  li {
    float: left;
    width: 140px;
    height: 204px;

    padding: 0 0 30px 42px;
    .dec {
      margin: 8px 0 3px;
      font-size: 14px;
    }
    .tit1 {
      display: inline-block;
      max-width: 100%;
      vertical-align: middle;
      color: #000;
      text-align: left;
    }
    p {
      width: 100%;
    }
  }
}
.u-cor {
  width: 140px;
  height: 140px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .msk {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #ccc;
    height: 27px;
    background: url("../images/coverall.png") no-repeat 0 -537px;
  }
}
.icon-play {
  display: inline-block;
  position: absolute;
  right: 10px;
  bottom: 5px;
  width: 16px;
  height: 17px;
  background: url(../images/iconall.png) no-repeat 0 0;
}
.icon-h {
  float: left;
  width: 14px;
  height: 11px;
  margin: 9px 5px 9px 10px;
  background: url(../images/iconall.png) no-repeat 0 -24px;
}
.nb {
  float: left;
  margin: 7px 0 0 0;
}
.n-clmnad {
  position: relative;
  margin: 0 0 35px;
}
.n-disk {
  position: relative;
  height: 186px;
  margin: 20px 0 37px;
  border: 1px solid #d3d3d3;
}
.inner {
  height: 184px;
  padding-left: 16px;
  background: #f5f5f5;
  border: 1px solid #fff;
}
.n-bilst {
  height: 472px;
  margin-top: 20px;
  padding-left: 1px;
  background: url(../images/index_bill.png) no-repeat;
  .blk {
    float: left;
    width: 230px;
    &:nth-child(n + 2) {
      width: 228px;
    }
  }
  .d-hd {
    height: 100px;
    padding: 20px 0 0 19px;
  }
  .tit3 {
    float: left;
    width: 116px;
    margin: 6px 0 0 10px;
    a {
      color: #333;
      text-align: left;
    }
  }
  ul {
    height: 320px;
    margin-left: 50px;
    line-height: 32px;
    li {
      height: 32px;

      &:hover {
        .nm {
          width: 96px;
        }
        .oper {
          display: block;
        }
      }
      &:nth-child(-n + 3) {
        span {
          color: red;
        }
      }
    }
    .no {
      float: left;
      position: relative;
      width: 35px;
      height: 32px;
      margin-left: -35px;
      text-align: center;
      font-size: 16px;
    }
    .nm {
      float: left;
      width: 170px;
      height: 32px;
      text-align: left;
    }
  }
}
.p-page {
  position: absolute;
  top: 71px;
  left: 4px;
  width: 17px;
  height: 17px;
  background: url(../images/index.png) no-repeat -260px -75px;
  &:hover {
    text-decoration: none;
    background: url(../images/index.png) no-repeat -280px -75px;
  }
}
.roll {
  float: left;
  width: 645px;
  height: 180px;
  overflow: hidden;
  ul {
    float: left;
    width: 645px;
    margin: 28px 0 0 0;
  }
  li {
    float: left;
    width: 118px;
    height: 150px;
    margin-left: 11px;
    background: url(../images/index.png) no-repeat -260px 100px;
  }
  p {
    text-align: left;
    width: 90%;
    line-height: 18px;
  }
}
.u-c {
  position: relative;
  margin: 0 0 7px 0;
  width: 100px;
  height: 100px;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .msk {
    position: absolute;
    top: 0;
    left: 0;
    width: 118px;
    height: 100px;
    background: url(../images/coverall.png) no-repeat 0 -570px;
  }
}
.icon-play1 {
  position: absolute;
  right: 10px;
  bottom: 5px;
  left: 72px;
  width: 22px;
  height: 22px;
  background: url(../images/iconall.png) no-repeat 0 -85px;
  &:hover {
    background: url(../images/iconall.png) no-repeat 0 -110px;
  }
}
.s-fc {
  color: #000;
}
.s-fc1 {
  color: #666;
}
.n-page {
  position: absolute;
  display: inline-block;
  right: 6px;
  top: 71px;
  width: 17px;
  height: 17px;
  background: url(../images/index.png) no-repeat -300px -75px;
  &:hover {
    text-decoration: none;
    background: url(../images/index.png) no-repeat -320px -75px;
  }
}
.m_ban {
  position: relative;

  width: 400%;
}
.cver {
  position: relative;
  float: left;
  width: 80px;
  height: 80px;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .msk2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/coverall.png) no-repeat -145px -57px;
  }
}
.btn {
  margin-top: 10px;
  a {
    float: left;
    width: 22px;
    height: 22px;
    margin-right: 10px;
  }
}
.p-bg {
  background: url(../images/index.png) no-repeat -267px -205px;
  &:hover {
    background: url(../images/index.png) no-repeat -267px -235px;
  }
}
.a-bg {
  background: url(../images/index.png) no-repeat -300px -205px;
  &:hover {
    background: url(../images/index.png) no-repeat -300px -235px;
  }
}
.blk1 {
  float: left;
  width: 228px;
}
.oper {
  display: none;
  float: right;
  width: 82px;
  margin: 7px 0 0 0;
  line-height: 32px;
  a {
    float: left;
    width: 17px;
    height: 17px;
    margin-right: 10px;
  }
}
.pl {
  background: url(../images/index.png) no-repeat -267px -268px;
  &:hover {
    background: url(../images/index.png) no-repeat -267px -288px;
  }
}
.ad {
  margin: 2px 6px 0 0;
  background: url(../images/icon.png) no-repeat 0 -700px;
  &:hover {
    background: url(../images/icon.png) no-repeat -22px -700px;
  }
}
.col {
  background: url(../images/index.png) no-repeat -297px -268px;
  &:hover {
    background: url(../images/index.png) no-repeat -297px -288px;
  }
}
.more1 {
  display: block;
  height: 32px;
  line-height: 32px;
  margin-right: 32px;
  text-align: right;
}
.n-user {
  height: 126px;
  background: url(../images/index.png) no-repeat 0 0;
}
.n-myinfo {
  width: 205px;
  margin: 0 auto;
  padding: 16px 0;
  line-height: 22px;
  text-align: left;
}
.enroll {
  margin: 0 auto;
  display: block;
  width: 100px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 0 #8a060b;

  background-repeat: no-repeat;
  background-image: url(../images/index.png);
  background-position: 0 -195px;
  &:hover {
    text-decoration: none;

    background-position: -110px -195px;
  }
}
.n-singer {
  margin-top: 15px;
}
.v-hd3 {
  position: relative;
  height: 23px;
  margin: 0 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-size: 12px;
}
.f-f1 {
  float: left;
}
.more2 {
  float: right;
  font-weight: normal;
  color: #666;
}
.n-enter {
  margin: 6px 0 14px 20px;
  li {
    margin-top: 14px;
    float: left;
    width: 210px;
    height: 62px;
    background: #fafafa;
  }
  .head {
    float: left;
    width: 62px;
    height: 62px;
    img {
      float: left;
      width: 62px;
      height: 62px;
    }
  }
  .ifo {
    float: left;
    width: 133px;
    height: 60px;
    padding-left: 14px;
    border: 1px solid #e9e9e9;
    border-left: none;
  }
  h4 {
    margin-top: 8px;
  }
}
.itm {
  float: left;
  width: 210px;
  height: 62px;
  background: #fafafa;
  &:hover {
    background: #f4f4f4;
  }
}
.n-s {
  display: block;
  width: 90%;
  text-align: left;
  color: #333;
  font-size: 14px;
}
.f-th {
  width: 90%;
  margin-top: 8px;
  color: #666;
  text-align: left;
  font-weight: 400;
}
.u-btn {
  display: inline-block;

  border-radius: 4px;
  color: #333;
  height: 31px;
  line-height: 31px;
  overflow: hidden;
  padding: 0 5px 0 0;
  background: url(../images/button2.png) no-repeat right -100px;
  &:hover {
    background: url(../images/button2.png) no-repeat right -182px;
  }
  i {
    display: inline-block;
    width: 170px;
    color: #333;
    padding: 0 15px 0 20px;
    height: 31px;
    line-height: 31px;
    background: url(../images/button2.png) 0 -59px;
    font-weight: bold;
    &:hover {
      background: url(../images/button2.png) 0 -141px;
    }
  }
}
.n-dj {
  margin-top: 30px;
}
.n-hotd {
  margin: 20px 0 0 20px;
  li {
    float: left;
    width: 210px;
    height: 50px;
  }
  .cver1 {
    float: left;
    width: 40px;
    margin-right: 10px;
    img {
      width: 40px;
      height: 40px;
      box-shadow: 0 0 1px #333333 inset;
    }
  }
  .info {
    float: left;
    width: 160px;
    line-height: 21px;
    text-align: left;
    p {
      width: 100%;
    }
  }
  .nm-icn {
    display: inline-block;
    max-width: 88%;
    color: #000;
  }
}
</style>